<template>
  <div class="manage-table">
    <slot name="search"></slot>
    <div class="table-box">
      <vxe-table
        align="center"
        size="medium"
        highlight-hover-row
        resizable
        border
        stripe
        :data="source"
        :header-cell-class-name="headerStyle"
        :row-class-name="rowClass"
        height="100%"
        class="table-con">
        <vxe-column type="seq" width="60" fixed="left" title="序号"></vxe-column>
        <vxe-column field="userName" title="姓名" min-width="100" fixed="left"></vxe-column>
        <template>
          <vxe-column field="leaderAssessScore" title="部门负责人评分" min-width="160" sortable>
            <template #default="{ row }">
              <div class="detail_box">
                <template v-if="row.status !== '2'">
                  <span v-if="row.leaderAssessScore || row.leaderAssessScore === 0">{{ row.leaderAssessScore }}分</span>
                  <span class="word_tip" v-if="row.leaderSuggestions.length > 0">
                    <el-popover placement="bottom" width="400" trigger="hover">
                      <PopoverDetail from="leader_extra" :rowInfo="row.leaderSuggestions" />
                      <span class="callout" slot="reference"></span>
                    </el-popover>
                  </span>
                </template>
                <span v-else>-</span>
              </div>
            </template>
          </vxe-column>
          <vxe-column field="mainLeaderAssessScore" title="分管负责人评分" min-width="160" sortable>
            <template #default="{ row }">
              <div class="detail_box">
                <template v-if="row.status !== '2'">
                  <span v-if="row.mainLeaderAssessScore || row.mainLeaderAssessScore === 0">
                    {{ row.mainLeaderAssessScore }}分
                  </span>
                  <span class="word_tip" v-if="row.mainLeaderSuggestions.length > 0">
                    <el-popover placement="bottom" width="400" trigger="hover">
                      <PopoverDetail from="main_extra" :rowInfo="row.mainLeaderSuggestions" />
                      <span class="callout" slot="reference"></span>
                    </el-popover>
                  </span>
                </template>
                <span v-else>-</span>
              </div>
            </template>
          </vxe-column>
          <vxe-column
            field="peopleAssessScore"
            title="民主测评分"
            min-width="120"
            sortable
            key="peopleAssessScore"
            v-if="needPeopleAssess">
            <template #default="{ row }">{{ row.peopleAssessScore }}分</template>
          </vxe-column>
          <vxe-column
            field="calcScore"
            title="加分与扣分"
            min-width="140"
            sortable
            key="calcScore"
            v-if="needPlusMinusPoints">
            <template #default="{ row }">
              <div class="detail_box">
                <span>{{ row.calcScore }}分</span>
                <span class="word_tip" v-if="row.calcScoreResponseVOS && row.calcScoreResponseVOS.length > 0">
                  <el-popover placement="bottom" width="300" trigger="hover">
                    <PopoverDetail from="add_scole" :rowInfo="row.calcScoreResponseVOS" />
                    <span class="callout" slot="reference"></span>
                  </el-popover>
                </span>
              </div>
            </template>
          </vxe-column>
          <vxe-column field="totalScore" title="季度考核得分" min-width="140" sortable>
            <template #default="{ row }">
              <span v-if="row.status !== '2'">{{ row.totalScore }}分</span>
              <span v-else>-</span>
            </template>
          </vxe-column>
        </template>
        <vxe-column field="orgAssessRank" min-width="120" title="考核等次结果" v-if="isDisabled" key="orgAssessRank">
          <template #default="{ row }">
            <div class="good_con_img" v-if="row.needAssessRank == 1">
              {{ (row.orgAssessRank || row.assessRank) | AssessRank }}
            </div>
            <div v-else>-</div>
          </template>
        </vxe-column>
        <vxe-column title="备注" min-width="140">
          <template #default="{ row }">
            <el-popover
              placement="bottom"
              width="300"
              trigger="hover"
              :disabled="!(row.modifyReason || row.adminRemark)">
              <PopoverDetail from="remark" :remarkInfo="row" />
              <div slot="reference" class="reason">
                <template v-if="!row.adminFileShowVOList.length">
                  <span
                    class="word"
                    v-if="
                      row.status === '2' &&
                      (row.orgAssessRank === '6' || row.assessRank === '6' || row.adminAssessRank === '6')
                    ">
                    {{ row.adminRemark }}
                  </span>
                  <span class="word" v-else>
                    {{ row.modifyReason || row.adminRemark }}
                  </span>
                </template>

                <div v-for="(fileItem, i) in row.adminFileShowVOList" class="fjp" :key="i">
                  <div class="file" @click="preview(fileItem, i)">
                    <p v-if="['jpeg', 'png', 'jpg'].includes(fileItem.fileType.toLowerCase())">
                      <viewer :options="imgViewerOption" @inited="inited" class="viewer" :ref="`viewer-${fileItem.id}`">
                        <template>
                          <img :src="fileItem.thumbnailPath" :key="i" style="display: none" />
                          <i class="el-icon-paperclip title_break">{{ fileItem.name }}</i>
                        </template>
                      </viewer>
                    </p>
                    <div class="title_break" v-else>
                      <i class="el-icon-paperclip"></i>
                      {{ fileItem.name }}
                    </div>
                  </div>
                </div>
                <span class="word_tip" v-if="row.modifyReason || row.adminRemark">
                  <span class="callout" slot="reference"></span>
                </span>
              </div>
            </el-popover>
          </template>
        </vxe-column>
        <vxe-column title="考核等次结果" width="300" fixed="right" v-if="!disabled" key="result">
          <template #default="{ row }">
            <div
              class="good_con"
              v-if="
                row.needAssessRank == 1 &&
                row.orgAssessRank !== '6' &&
                row.assessRank !== '6' &&
                row.adminAssessRank !== '6'
              ">
              <span
                class="back_good"
                :class="{ active: row.assessRank == item.id }"
                v-for="item in resultList"
                :key="item.id"
                @click="setEqual(item, row)">
                {{ item.name }}
              </span>
            </div>
            <div class="good_con" v-else>-</div>
          </template>
        </vxe-column>
      </vxe-table>
    </div>

    <XnDialog custom-class="showFile" :visible.sync="dialogVisible" @close="handleVideoClose" width="60%">
      <videoPlayer
        class="vjs-custom-skin vjs-big-play-centered"
        :options="playerOptions"
        ref="videoPlayer"></videoPlayer>
    </XnDialog>
  </div>
</template>

<script>
import XnDialog from '@com/xnDialog.vue'
import PopoverDetail from '../../components/popoverDetail.vue'
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
  name: 'gzryManageTable',
  emits: ['del-account', 'edit-account', 'import-account', 'update-account'],
  components: { PopoverDetail, XnDialog, videoPlayer },
  props: {
    source: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: true,
    },
    needPeopleAssess: {
      type: Boolean,
      default: false,
    },
    needPlusMinusPoints: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      imgViewerOption: {
        navbar: false,
        title: false,
        toolbar: true,
        zIndex: 9999,
      },
      playerOptions: {
        language: 'zh-CN',
        aspectRatio: '16:9',
        fluid: true,
        sources: [
          {
            type: 'video/mp4',
            src: '',
          },
        ],
        autoplay: false,
        controls: true,
        // poster: "../../../src/static/img/poster.png"
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true, // 是否显示全屏按钮
        },
      },
      dialogVisible: false,
      isDisabled: false,
    }
  },
  filters: {
    AssessRank(val) {
      switch (val) {
        case '1':
          return '好'
        case '5':
          return '建议为好'
        case '2':
          return '较好'
        case '3':
          return '一般'
        case '4':
          return '较差'
        case '6':
          return '不定等次'
        default:
          return '-'
      }
    },
  },
  watch: {
    disabled: {
      handler(news) {
        this.isDisabled = news
      },
      immediate: true,
    },
  },
  computed: {
    resultList() {
      const list = [
        { id: '1', name: '好' },
        { id: '2', name: '较好' },
        { id: '3', name: '一般' },
        { id: '4', name: '较差' },
      ]
      return list
    },
  },
  created() {},
  mounted() {},
  methods: {
    /* 头部样式 */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return 'headerStyle'
    },
    rowClass({ row, rowIndex }) {
      return 'rowClass'
    },
    inited(viewer) {
      this.$viewer = viewer
    },
    handleVideoClose() {
      if (!this.dialogVisible) return
      this.$refs.videoPlayer.player.pause()
      this.dialogVisible = false
    },
    preview(item, i) {
      if (['jpeg', 'png', 'jpg'].includes(item.fileType.toLowerCase())) {
        this.previewPic(i, item)
      } else if (['mp4', 'rmp4'].includes(item.fileType.toLowerCase())) {
        this.previewVid(item)
      } else if (['xlsx', 'xls', 'doc', 'docx', 'pdf'].includes(item.fileType.toLowerCase())) {
        this.previewFile(item)
      }
    },
    previewPic(i, item) {
      const ref = `viewer-${item.id}`
      this.$refs[ref][0].$viewer.show()
    },
    previewVid(item) {
      this.playerOptions.sources[0].src = item.sourcePath
      this.playerOptions.poster = item.sourcePath
      this.dialogVisible = true
    },
    previewFile(item) {
      const routeData = this.$router.resolve({
        name: 'PDF_PAGE',
        query: {
          url: item.thumbnailPath,
        },
      })
      window.open(routeData.href, '_blank')
    },
    setEqual(item, row) {
      this.$emit('setEqual', item, row)
    },
  },
}
</script>
<style lang="scss" scoped>
.manage-table {
  height: 100%;
  display: flex;
  flex-direction: column;
  .search-box {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .search-left {
      display: flex;
      align-items: center;
      .search-item {
        max-width: 240px;
      }
      .search-item + .search-item {
        margin-left: 20px;
      }
      .search-inp {
        width: 240px;
      }
      .el-icon-search {
        cursor: pointer;
      }
    }
    .search-right {
      display: flex;
      align-items: center;
      .search-item + .search-item {
        margin-left: 20px;
      }
      .info_box {
        color: #d9001b;
      }
      .info {
        display: flex;
        align-items: center;
        .info_list {
          margin-left: 20px;
        }
      }
    }
    &:first-child {
      border-bottom: 1px solid #e4eaf0;
      padding-bottom: 10px;
    }
  }
  .table-box {
    flex: 1;
    position: relative;

    .table-con {
      ::v-deep .headerStyle {
        background-color: #f0f4f9;

        .vxe-cell {
          color: #333333;
          font-size: 14px;

          span {
            font-weight: 600;
          }
        }
      }

      ::v-deep .rowClass {
        .vxe-cell {
          color: #666666;
          font-size: 14px;

          p,
          div,
          span {
            font-size: 14px;
          }
        }
      }
      .good_con {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
      }
      .good_con_img {
        border: 1px solid #e6e6e6;
        border-radius: 20px;
        width: 85px;
        min-width: 85px;
        color: #fff;
        background-color: #e0c699;
        border-color: #e0c699;
        margin: auto;
      }
      .back_good {
        display: inline-block;
        cursor: pointer;
        margin: 0 8px;
        border: 1px solid #e6e6e6;
        border-radius: 20px;
        width: 50px;
        min-width: 50px;
      }
      .active {
        color: #fff;
        background-color: #e0c699;
        border-color: #e0c699;
      }
      .detail_box {
        // position: relative;
        .word_tip {
          position: absolute;
          right: 1px;
          bottom: 10px;
          .callout {
            width: 0;
            height: 0;
            border-bottom: 10px solid red;
            border-left: 10px solid transparent;
          }
        }
      }
    }
  }
}
</style>
